import React from "react"
import { Link, Outlet, useNavigate } from 'react-router-dom'
import { Menu, Button } from 'antd'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons'

import "./main.scss"
import { Avatar } from 'antd'
const { SubMenu } = Menu

const Main = () => {
  const Navigate = useNavigate()

  const handleClick = e => {
  }
  const logOut = () => {
    localStorage.removeItem('token')
    Navigate('/login')
  }
  return (
    <div className="mainCintainer">
      <div className="navContainer">
        <Menu
          theme={'dark'}
          onClick={handleClick}
          style={{ width: 256 }}
          defaultOpenKeys={['sub1']}
          mode="inline"
        >
          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
            <Menu.Item key="1">
              <Link to="/page1">table表格</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/page2">form表单</Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to="/page3">测试组件传参</Link>
            </Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="7">Option 7</Menu.Item>
              <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </SubMenu>
          <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <Menu.Item key="11">Option 11</Menu.Item>
            <Menu.Item key="12">Option 12</Menu.Item>
          </SubMenu>
        </Menu>
      </div>
      <div className="rightContainer">
        <div className="headerContainer">
          <div className="breadRouter">Antdesign</div>
          <div className="headerDrop">
            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>W</Avatar>
            <Button type="link" onClick={logOut}>退出</Button>
          </div>
        </div>
        <div className="contentContainer">
          <Outlet />
        </div>
      </div>
    </div>
  )
}
export default Main
